<template>
    <div class="myorder-div">
        <div class="myorder-div-main">
            <div class="myorder-div-title">
                <div>
                    <span>{{ orderInfo.serviceName }}</span>
                </div>
                <div>
                    <span v-show="orderInfo.isPayment == 2">待付款</span>
                    <span v-show="orderInfo.isPayment == 1 && orderInfo.isDeal == 2 && orderInfo.isFeedback == 2">待服务</span>
                    <span v-show="orderInfo.isPayment == 1 && orderInfo.isDeal == 1 && orderInfo.isFeedback == 2">待评价</span>
                    <span v-show="orderInfo.isPayment == 1 && orderInfo.isFeedback == 1">交易成功</span>
                </div>
            </div>
            <div class="myorder-address">
                <div>
                    <van-icon name="location-o" />
                </div>
                <div style="margin-left: 10px;">
                    <span>{{ orderInfo.address }}</span>
                </div>
            </div>
            <div v-show="orderInfo.note != null && orderInfo.note != ''" class="myorder-note">
                <span>备注：{{ orderInfo.note }}</span>
            </div>
            <div class="myorder-price">
                <span v-show="orderInfo.isPayment == 1">实付：￥{{ orderInfo.totalFee }}</span>
                <span v-show="orderInfo.isPayment == 2">应付：￥{{ orderInfo.totalFee }}</span>
            </div>
            <div class="myoreder-btn">
                <van-button plain size="small" type="danger" v-show="cancel(orderInfo)"
                    @click="cancelOrder(orderInfo.id)">取消订单</van-button>
                <van-button plain size="small" type="danger" v-show="deleteOrder(orderInfo)"
                    @click="cancelOrder(orderInfo.id)">删除记录</van-button>
                <van-button plain size="small" v-show="payment(orderInfo)" type="info"
                    @click="$router.push(`/user/order/payment/${orderInfo.id}`)">去支付</van-button>
                <van-button plain size="small"
                    v-show="feedback(orderInfo)"
                    type="primary">去评价</van-button>
            </div>
        </div>
        <div class="divider"></div>
    </div>
</template>

<script>
export default {
    name: "MyOrder",
    props: ['orderInfo'],
    mounted() {

    },
    methods: {
        cancelOrder() {
            this.$emit("myCancelOrder", this.orderInfo.id)
        },
        // 删除订单
        deleteOrder(orderInfo) {
            return orderInfo.isDeal == 1
        },
        // 取消订单
        cancel(orderInfo) {
            return orderInfo.isPayment == 2
        },
        // 支付
        payment(orderInfo){
            return orderInfo.isPayment == 2
        },
        // 评价
        feedback(orderInfo){
            return orderInfo.isPayment == 1 && orderInfo.isDeal == 1 && orderInfo.isFeedback == 2
        }
    },
}
</script>

<style scoped>
.myorder-div-main {
    width: 90%;
    margin: 0 auto;
}

.myorder-div-title {
    padding: 5px 0 5px 0;
    display: flex;
    font-size: 0.9rem;
    justify-content: space-between;
}

.divider {
    height: 10px;
    background-color: rgb(246, 242, 242);
}

.myorder-address {
    padding: 5px 0 5px 0;
    display: flex;
    align-items: center;
    font-size: 0.9rem;
}

.myorder-address .van-icon {
    font-size: 20px;
}

.myorder-price {
    height: 30px;
    line-height: 30px;
    text-align: right;
    font-size: 0.9rem;
}

.myoreder-btn {
    padding: 5px 0 5px 0;
    text-align: right;
}

.myoreder-btn button {
    margin-left: 10px;
}

.myorder-note {
    font-size: 0.8rem;
}</style>